<!DOCTYPE HTML>
<html lang="en-us">
<head>
    <title>4everyone</title>
  	<meta charset="utf-8">
    <meta name="description" content="4everyone">
    <meta name="keywords" content="4everyone">
    <meta name="author" content="4everyone">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>	
   
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/mobilemenu.css">
	<link rel="icon" href="images/favicon.ico" type="image/x-icon">
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
	<script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery.session.js"></script>
    <script type="text/javascript" src="js/parallax.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider.js"></script>
    <script type="text/javascript" src="js/message-form.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
	
    <style>
      *{font-family: "Microsoft YaHei";}
       header{height:75px;}
	   a.logo{margin-top:15px;}
	   ul.menu{margin-top:28px;}
	   ul.menu li{font-size: 16px;}
	   .home_page + .container-fill {margin: 0 auto;}
	   header.scrolled + div {padding-top: 10px;}
	   h1,h2,h3,h4,h5,h6{font-family: "Microsoft YaHei";}
	   #message_form label input, 
	   #message_form label textarea, 
	   #comment_form label input, 
	   #comment_form label textarea {
      border-radius: 8px;}
      #message_form label input,
      #message_form label textarea, 
      #comment_form label input, 
      #comment_form label textarea {
      font-style:normal;
      font-family: "Microsoft YaHei";}
      .btn_1{font-size:14px;}
      .color_wrap{top:100px;}
      .about-me {
		width: 100%;
	  }
	  #about-item .bg {
		width: 100%;
		}
		#about-container {
		position: relative;
		}
		.about-caption {
		text-align: center;
		z-index: 10;
		position: absolute;
		right: 15%;
		left: 15%;
		font-family: "Microsoft Yahei";
		text-shadow: 0 1px 2px rgba(0,0,0,0.3);
		bottom: 100px;
		}
		.about-caption #icon {
		border-radius: 50%;
		}
		.about-caption #icon {
		width: 120px;
		}
		#icon {
		text-align: center;
		}
		.about-caption #name {
		font-size: 20px;
		margin-bottom: 20px;
		margin-top: 20px;
		color:#666;
		font-family: "Microsoft Yahei";
		}
		.about-caption #brief {
		font-size: 16px;
		color:#666;
		font-family: "Microsoft Yahei";
		}
		.container {
		    padding: 0 20px 30px;
		}
		figcaption p{font-size:30px;}
		
		/* hide sub menu links */
		.sub-menu {
		background:#fff;
		box-shadow: 0 1px 5px -1px #333;
		display:none;
		}
		.dropdown{
		position:relative;
		}
		.sub-menu{
		position:absolute;
		left:0px;
		width:124px;
		}
		ul.sub-menu li{
		padding-top:10px;
		}
    </style>
    <script type="text/javascript"><!--
		$(window).scroll(function () {
			//if (jQuery(this).scrollTop() > 550) {
			//	jQuery('header').addClass('scrolled');
			//} else {
			//	jQuery('header').removeClass('scrolled');
			//}
			$('.flexslider').flexslider({
				animation: "fade",
				animationSpeed: 500,
				smoothHeight: true,
				animationLoop: true,
				touch: true,
				directionNav: false
			});
		});
		
   $(document).ready(function () {
        //hover 事件效果 看http://www.cnblogs.com/xiaoyusmile/archive/2012/03/13/2393298.html
        $( '.dropdown' ).hover(
            function () {
                //slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
                $(this).children('.sub-menu').slideDown(200);
            },
            function () {
                //slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
                $(this).children('.sub-menu').slideUp(200);
            }
        );
    }); 
    </script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
 <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
   <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
</head>
	<body>
        <div class="color_wrap color_wrap_open">
        	<a class="btn_skin"></a>
        	<div>skin</div>
            <div class="basic"><a onClick="get_theme('style')">Basic</a></div>
            <div class="theme_1"><a onClick="get_theme('theme_1')">theme_1</a></div>
            <div class="theme_2"><a onClick="get_theme('theme_2')">theme_2</a></div>
            <div class="theme_3"><a onClick="get_theme('theme_3')">theme_3</a></div>
            <div class="theme_4"><a onClick="get_theme('theme_4')">theme_4</a></div>
            <div class="theme_5"><a onClick="get_theme('theme_5')">theme_5</a></div>
        </div>


		<header class="home_page scrolled">
			<div class="container">
            	<div class="row">
                    <div class="span12">
                        <a class="logo" href="index.htm">4everyone</a>
                        <button class="nav-button">menu</button>
                        <ul class="menu">
                            <li><a class="home" href="#home">主页</a></li>
                            <li class="dropdown">
                               <a class="about" href="#about">个人简介</a>
                              <ul class="sub-menu" >
                                <li><a class="work" href="#skill">专业技能</a></li>
                                <li style="margin-bottom:10px;"><a href="#work">项目经历</a></li>
                              </ul>	
                            </li>	
                            <li><a href="blog.htm">博客</a></li>
                            <li><a class="contact" href="#contact">与我联系</a></li>
                        </ul>
                    </div>
                </div>
			</div><!--/container-->
		</header>		
		<div class="container-fill">
		<!--  	<div class="row_1" id="about">
                <div class="container">
                    <h3 class="border">Welcome!</h3>
                    <div class="row">
                        <article class="span4">
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eui smod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.</p>
                        </article>
                        <article class="span4">
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eui smod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam corper suscipit lobortis nisl ut.</p>
                        </article>
                        <article class="span4">
                            <p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.</p>
                        </article>
                    </div>
                </div>
            </div>
            -->
	           <div class = "about-me">
					<div class="item" id="about-item">
						<img class="bg" src="../blog/img/5.png" alt="1 slide">
						<div class="container" id="about-container">
							<div class="about-caption">
								<img id="icon" src="../blog/img/m.jpg"/>
								<p id="name">女剑客</p>
								<p id="brief">爱生活、爱艺术、爱书画、爱音乐、爱设计、爱编程。</p>
								<p id="brief">人生百态，笑口常开，秉承自我，谨慎独行。静觅，静静寻觅生活的美好。</p>
							</div>
						</div>
					</div>
				</div>
            <div class="row_1">
                <div class="container" id="skill">
                    <h3 class="border">专业技能</h3>
                    <div class="row">
                        <article class="span4 box_1">
                            <div class="icon_bg"><img src="images/icon-1.png" alt=""></div>
                            <h6><a href="#">Strategy</a></h6>
                            <p>Lorem ipsum dolor sit ametet<br>uer adipiscing elit, sed diam nonummy nibh euismod tincidu.</p>
                            <a href="#" class="btn btn_1">read more</a>
                        </article>
                        <article class="span4 box_1">
                            <div class="icon_bg"><img src="images/icon-2.png" alt=""></div>
                            <h6><a href="#">user experience</a></h6>
                            <p>Lorem ipsum dolor sit ametet<br>uer adipiscing elit, sed diam nonummy nibh euismod tincidu.</p>
                            <a href="#" class="btn btn_1">read more</a>
                        </article>
                        <article class="span4 box_1">
                            <div class="icon_bg"><img src="images/icon-3.png" alt=""></div>
                            <h6><a href="#">design</a></h6>
                            <p>Lorem ipsum dolor sit ametet<br>uer adipiscing elit, sed diam nonummy nibh euismod tincidu.</p>
                            <a href="#" class="btn btn_1">read more</a>
                        </article>
                    </div>
                    <div class="row">
                        <article class="span4 box_1">
                            <div class="icon_bg"><img src="images/icon-4.png" alt=""></div>
                            <h6><a href="#">development</a></h6>
                            <p>Lorem ipsum dolor sit ametet<br>uer adipiscing elit, sed diam nonummy nibh euismod tincidu.</p>
                            <a href="#" class="btn btn_1">read more</a>
                        </article>
                        <article class="span4 box_1">
                            <div class="icon_bg"><img src="images/icon-5.png" alt=""></div>
                            <h6><a href="#">Wordpress</a></h6>
                            <p>Lorem ipsum dolor sit ametet<br>uer adipiscing elit, sed diam nonummy nibh euismod tincidu.</p>
                            <a href="#" class="btn btn_1">read more</a>
                        </article>
                        <article class="span4 box_1">
                            <div class="icon_bg"><img src="images/icon-6.png" alt=""></div>
                            <h6><a href="#">ceo</a></h6>
                            <p>Lorem ipsum dolor sit ametet<br>uer adipiscing elit, sed diam nonummy nibh euismod tincidu.</p>
                            <a href="#" class="btn btn_1">read more</a>
                        </article>
                    </div>
                </div>
            </div>
            <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" title="模板之家">模板之家</a></div>
            <div class="row_1" id="work">
                <div class="container">
                    <h3 class="border">项目经历</h3>
                    <div class="row">
                        <article class="span8 offset2 text-center">
                            <p><br></p>
                           <!--  <div><a href="#" class="btn btn_1"></a></div>--> 
                        </article>
                    </div>
                    <div class="row gallery_wrapper">
                    	<section class="span3 gallery_item gallery_item_1">
                        	<figure class="">
                            	<img src="images/gallery_img_1.png" alt="">
                                <figcaption>
                                	<p>合伙设计人</p>
                                    <h6>高仿购房人度过</h6>
                                    <h6><a href="#">戳戳看</a></h6>
                                </figcaption>
                            </figure>
                        </section>
                    	<section class="span3 gallery_item gallery_item_2">
                        	<figure class="">
                            	<img src="images/gallery_img_2.png" alt="">
                                <figcaption>
                                	<p>Wordpress Theme Front-End Development</p>
                                    <h6>website</h6>
                                    <h6><a href="#">戳戳看</a></h6>
                                </figcaption>
                            </figure>
                        </section>
                    	<section class="span3 gallery_item gallery_item_3">
                        	<figure class="">
                            	<img src="images/gallery_img_3.png" alt="">
                                <figcaption>
                                	<p>Wordpress Theme Front-End Development</p>
                                    <h6>website</h6>
                                    <h6><a href="#">戳戳看</a></h6>
                                </figcaption>
                            </figure>
                        </section>
                    	<section class="span3 gallery_item gallery_item_4">
                        	<figure class="">
                            	<img src="images/gallery_img_4.png" alt="">
                                <figcaption>
                                	<p>Wordpress Theme Front-End Development</p>
                                    <h6>website</h6>
                                    <h6><a href="#">戳戳看</a></h6>
                                </figcaption>
                            </figure>
                        </section>
                    	<section class="span3 gallery_item gallery_item_5">
                        	<figure class="">
                            	<img src="images/gallery_img_5.png" alt="">
                                <figcaption>
                                	<p>Wordpress Theme Front-End Development</p>
                                    <h6>website</h6>
                                    <h6><a href="#">戳戳看</a></h6>
                                </figcaption>
                            </figure>
                        </section>
                    	<section class="span3 gallery_item gallery_item_6">
                        	<figure class="">
                            	<img src="images/gallery_img_6.png" alt="">
                                <figcaption>
                                	<p>Wordpress Theme Front-End Development</p>
                                    <h6>website</h6>
                                    <h6><a href="#">戳戳看</a></h6>
                                </figcaption>
                            </figure>
                        </section>
                    	<section class="span3 gallery_item gallery_item_7">
                        	<figure class="">
                            	<img src="images/gallery_img_7.png" alt="">
                                <figcaption>
                                	<p>Wordpress Theme Front-End Development</p>
                                    <h6>website</h6>
                                    <h6><a href="#">戳戳看</a></h6>
                                </figcaption>
                            </figure>
                        </section>
                    	<section class="span3 gallery_item gallery_item_8">
                        	<figure class="">
                            	<img src="images/gallery_img_8.png" alt="">
                                <figcaption>
                                	<p>Wordpress Theme Front-End Development</p>
                                    <h6>website</h6>
                                    <h6><a href="#">戳戳看</a></h6>
                                </figcaption>
                            </figure>
                        </section>
                    	<section class="span3 gallery_item gallery_item_9">
                        	<figure class="">
                            	<img src="images/gallery_img_9.png" alt="">
                                <figcaption>
                                	<p>Wordpress Theme Front-End Development</p>
                                    <h6>website</h6>
                                    <h6><a href="#">戳戳看</a></h6>
                                </figcaption>
                            </figure>
                        </section>
                    	<section class="span3 gallery_item gallery_item_10">
                        	<figure class="">
                            	<img src="images/gallery_img_10.png" alt="">
                                <figcaption>
                                	<p>Wordpress Theme Front-End Development</p>
                                    <h6>website</h6>
                                    <h6><a href="#">戳戳看</a></h6>
                                </figcaption>
                            </figure>
                        </section>
                    </div>
                </div>
            </div>
            <div id="contact">
            	<div class="map_wrapper">
                    <div class="container">
                        <h3 class="border">与我联系</h3>
                        <div class="row">
                            <section class="span3">
                            	<div class="indent1">
                                	<h6>邮寄地址</h6>
                                    <h5><span>天山路641号慧谷白猫科技园</span></h5>
                                    <h5 class="color_1">星期一 ~ 星期二 5:30AM - 10PM</h5>
                                    <h5 class="color_1">T - 123.456.7890<br>F - 123.789.3456</h5>
                                    <h6><a href="mailto:@oursitemail.com">@oursitemail.com</a></h6>
                                </div>
                            </section>
                            <section class="span9">
                            	<div class="indent2">
                                	<h5>你有更棒的主意吗？请与我联系</h5>
                                    <form id="message_form">
                                        <div class="success"></div>
                                        <fieldset>
                                            <div class="row">
                                                <div class="span3">
                                                    <label class="name">
                                                        <input type="text" value="你的名字">
                                                    </label>
                                                    <label class="email">
                                                        <input type="text" value="你的邮箱">
                                                    </label>
                                                    <label class="notRequired">
                                                        <input type="text" value="主题">
                                                    </label>
                                                </div>
                                                <div class="span4">
                                                    <label class="message">
                                                        <textarea>你想说的话</textarea>
                                                    </label>
                                                    <a class="btn btn_1" data-type="submit">戳我吧</a>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                            </section>
                        </div>
                    </div>

                </div>
            </div>
            <footer>
                <div class="container">
                    <div class="row">
                        <div class="span12 text-center">
                            啦啦啦 <a href="http://www.cssmoban.com/" title="网页模板" target="_blank"></a>
                        </div>
                    </div>
                </div>
            </footer>
		</div><!--/container-fill-->

</body>
</html>